<!--
 * @FileDescription: 搜素组件，该组件承担着所有与搜索相关的功能，用户在该模块下输入，
 * 在本组件发送请求后将数据返回父组件上，所以需要根据不同的父组件使用不同的请求方式，也就是说
 * 需要不同的接受参数。
 * @Author: yijiamu
 * @Date: 2022-05-08 15:32:44
 * @LastEditors: yijiamu
 * @LastEditTime: 2022-05-08 15:32:44
 -->
<!--reqSearchPlace,reqSearchShopList-->
<template>
  <div class="search">
    <div class="search-container">
      <form class="city_form" v-on:submit.prevent>
        <input type="search"
           :placeholder="placeholderValue"
           @keydown.enter="postMethod"
           v-model='inputValue'
           class="input">
      </form>
    </div>
    <button @click="$router.go(-1)"  class="cancel">取消</button>
  </div>
</template>

<script lang="ts">
import { Component,Prop, Vue, Watch } from 'vue-property-decorator';
import {getStore, messageNoAnswer, setStore} from "@/utils/utils";
import {searchMethods, searchPlaceQuery, searchShopQuery} from "@/utils/utilsType";
import { reqSearchPlace ,reqSearchShopList} from '@/api/search';
import { AxiosResponse } from "axios";

@Component({})
export default class searchCom extends Vue {
  @Prop() query !:  searchPlaceQuery & searchShopQuery ; //调用搜索请求的参数
  @Prop() crumbValue !: string; //专门接受由面包屑传递的参数，可为空
  @Prop() searchMethod !: searchMethods;  //search组件发送哪一种搜索请求
  @Prop() placeholderValue : string| undefined; //默认显示
  private inputValue = '' as string; // 搜索值
  private historyList:string[] = [] // 历史搜索记录
  private historyName!:string //存储历史记录的name
  private postMethod !: Function;
  beforeMount(){
    if(this.searchMethod === "searchPlaceQuery"){
      this.postMethod = this.postPosition;
      this.historyName = 'positionHistory';
    }else if(this.searchMethod === "searchShopQuery"){
      this.postMethod = this.shopPosition;
      this.historyName = 'shopHistory';
    }
  }
/**
  * @description: 当输入发送改变时，实时更改keyword，当输入框没有文字时，清空所有搜索结果
  * @return {void}
  */
  @Watch('inputValue')
  onInputValueChanged() {
    if(this.inputValue == ''){
      this.$emit('putSearchList',[]);
    }
    this.query.keyword = this.inputValue;
  }
/**
  * @description: 当用户点击面包屑时，触发watch，传数据到search页面中，如何进行搜索
  * @return {}
  */
  @Watch('crumbValue')
  onCrumbValueChanged(){
    this.inputValue = this.crumbValue;
    //这里使用nextTick 当数据更改之后再调用postPosition
    this.$nextTick(()=>{
      this.postMethod();
    })
  }
/**
  * @description: searchPosition的提交表单信息的方法
  * @return {}
  */
  private async postPosition(){
    // 输入值不为空时才发送信息
    if (this.inputValue) {
      reqSearchPlace({
        city_id: this.query.city_id,
        keyword: this.query.keyword
      }).then((res:AxiosResponse)=>{
        //判断是不是无效搜索
        if(!res.data.length){
          messageNoAnswer.call(this)
          return
        }
        this.storeHistory()
        //将结果反馈到父组件中
        this.$emit('putSearchList',res.data)
      },err=>{
        this.$message({
          message: '没有找到呦，重新搜索叭？',
          type: 'warning'
        });
      })

    }
  }
/**
* @description: shopPosition的提交表单信息的方法
* @return {}
*/
  private async shopPosition(){
    // 输入值不为空时才发送信息
    if (this.inputValue) {
      reqSearchShopList({
        geohash: this.query.geohash,
        keyword: this.query.keyword,
      }).then((res:AxiosResponse)=>{
        //判断是不是无效搜索
        if(!res.data.length){
          messageNoAnswer.call(this)
          return
        }
        this.storeHistory()
        //将结果反馈到父组件中
        this.$emit('putSearchList',res.data)
      }, err =>{
        this.$message({
          message: '没有找到呦，重新搜索叭？',
          type: 'warning'
        });
      })
    }
  }
/**
 * @description: 历史记录缓存
 * @return {}
 */
  private storeHistory(){
    if (getStore(this.historyName)) {
      this.historyList = JSON.parse(getStore(this.historyName) as  string);
    }else{
      this.historyList = [];
    };
    if(this.historyList.every((item:string)=> {return this.inputValue !== item})){
      this.historyList.push(this.inputValue)
    }
    setStore(this.historyName,this.historyList)
  }
}
</script>

<style scoped lang="less">
  *{
    padding: 0;
    margin: 0;
  }
  ul , ol {
    list-style: none;
  }
  .search {
    color: #999999;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 2vh 2vh 1vh 2vh;
    .search-container {
      position: relative;
      .el-icon-search {
        position: absolute;
        font-size: large;
        top: 25%;
        left: 1em;
      }
      .input {
        width: 70vw;
        font-size: 14px;
        padding: 0.6em 1.5em  0.6em  1.5em;
        vertical-align: center;
        border: none;
        background-color: #eaeaea;
        border-radius: 30px
      }
    }
    .cancel {
      padding: 0;
      margin: 0 1vw;
      min-width: 40px;
      font-size: medium;
      white-space: nowrap;
      width: 10vh;
      height: 100%;
      border: none;
      color: #66b5f9;
      background-color: #f5f5f5;
    }
  }
</style>
